"use client"

import { motion } from "framer-motion"
import { ArrowLeft, ExternalLink, Users, Clock, Trophy, Share2, Bookmark } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import Link from "next/link"
import Image from "next/image"
import { useParams } from "next/navigation"
import { useState } from "react"
import { useToast } from "@/hooks/use-toast"

const mockHackathon = {
  id: 1,
  title: "Kaggle - House Prices Competition",
  platform: "Kaggle",
  prize: "$15,000",
  deadline: "2024-02-15",
  participants: 2847,
  image: "/placeholder.svg?height=400&width=800",
  tags: ["Machine Learning", "Regression", "Data Science"],
  difficulty: "Beginner",
  description:
    "预测房价是机器学习的经典入门项目。在这个竞赛中，你需要使用79个解释变量来预测爱荷华州埃姆斯市住宅的最终价格。",
  rules: "使用提供的训练数据集构建模型，预测测试集中房屋的销售价格。评估指标为均方根对数误差(RMSLE)。",
  prizes: [
    { rank: "1st Place", amount: "$7,500", description: "冠军奖金" },
    { rank: "2nd Place", amount: "$4,500", description: "亚军奖金" },
    { rank: "3rd Place", amount: "$3,000", description: "季军奖金" },
  ],
  timeline: [
    { date: "2024-01-01", event: "竞赛开始", status: "completed" },
    { date: "2024-01-15", event: "数据集发布", status: "completed" },
    { date: "2024-02-01", event: "中期检查点", status: "current" },
    { date: "2024-02-15", event: "提交截止", status: "upcoming" },
    { date: "2024-02-20", event: "结果公布", status: "upcoming" },
  ],
  teammates: [
    {
      id: 1,
      name: "Alex Chen",
      avatar: "/placeholder.svg?height=40&width=40",
      skills: ["Python", "ML"],
      rank: "Kaggle Expert",
    },
    {
      id: 2,
      name: "Sarah Kim",
      avatar: "/placeholder.svg?height=40&width=40",
      skills: ["R", "Statistics"],
      rank: "Kaggle Master",
    },
    {
      id: 3,
      name: "Mike Johnson",
      avatar: "/placeholder.svg?height=40&width=40",
      skills: ["TensorFlow", "Deep Learning"],
      rank: "Kaggle Expert",
    },
    {
      id: 4,
      name: "Lisa Wang",
      avatar: "/placeholder.svg?height=40&width=40",
      skills: ["Pandas", "Visualization"],
      rank: "Kaggle Contributor",
    },
  ],
}

export default function HackathonDetailPage() {
  const params = useParams()
  const { toast } = useToast()
  const [isBookmarked, setIsBookmarked] = useState(false)
  const [isJoining, setIsJoining] = useState(false)

  const handleJoinTeam = async () => {
    setIsJoining(true)
    await new Promise((resolve) => setTimeout(resolve, 1000))
    setIsJoining(false)
    toast({
      title: "🎉 加入成功！",
      description: "已为你匹配到最佳队友，准备开黑吧！",
    })
  }

  const handleBookmark = () => {
    setIsBookmarked(!isBookmarked)
    toast({
      title: isBookmarked ? "已取消收藏" : "已收藏",
      description: isBookmarked ? "从收藏夹中移除" : "已添加到收藏夹",
    })
  }

  const daysLeft = Math.ceil(
    (new Date(mockHackathon.deadline).getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24),
  )

  return (
    <div className="min-h-screen pt-20">
      <div className="container mx-auto px-4 py-8">
        {/* 返回按钮 */}
        <motion.div initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }} className="mb-6">
          <Link href="/">
            <Button variant="ghost" size="sm" className="gap-2">
              <ArrowLeft className="w-4 h-4" />
              返回首页
            </Button>
          </Link>
        </motion.div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* 主要内容 */}
          <div className="lg:col-span-2">
            {/* Hero 图片 */}
            <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="mb-8">
              <div className="relative rounded-xl overflow-hidden">
                <Image
                  src={mockHackathon.image || "/placeholder.svg"}
                  alt={mockHackathon.title}
                  width={800}
                  height={400}
                  className="w-full h-64 object-cover"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
                <div className="absolute bottom-4 left-4 right-4">
                  <div className="flex items-center gap-2 mb-2">
                    <Badge className="bg-blue-500/20 text-blue-400">{mockHackathon.platform}</Badge>
                    <Badge className="bg-green-500/20 text-green-400">{mockHackathon.difficulty}</Badge>
                  </div>
                  <h1 className="text-3xl font-bold text-white mb-2">{mockHackathon.title}</h1>
                  <div className="flex items-center gap-4 text-white/80">
                    <div className="flex items-center gap-1">
                      <Trophy className="w-4 h-4" />
                      <span>{mockHackathon.prize}</span>
                    </div>
                    <div className="flex items-center gap-1">
                      <Users className="w-4 h-4" />
                      <span>{mockHackathon.participants.toLocaleString()} 参与者</span>
                    </div>
                    <div className="flex items-center gap-1">
                      <Clock className="w-4 h-4" />
                      <span>{daysLeft} 天后截止</span>
                    </div>
                  </div>
                </div>
              </div>
            </motion.div>

            {/* 标签 */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.2 }}
              className="flex flex-wrap gap-2 mb-8"
            >
              {mockHackathon.tags.map((tag) => (
                <Badge key={tag} variant="outline">
                  {tag}
                </Badge>
              ))}
            </motion.div>

            {/* 详情标签页 */}
            <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.4 }}>
              <Tabs defaultValue="details" className="w-full">
                <TabsList className="grid w-full grid-cols-4 glass">
                  <TabsTrigger value="details">详情</TabsTrigger>
                  <TabsTrigger value="prizes">奖项</TabsTrigger>
                  <TabsTrigger value="timeline">时间线</TabsTrigger>
                  <TabsTrigger value="teammates">队友榜</TabsTrigger>
                </TabsList>

                <TabsContent value="details" className="mt-6">
                  <Card className="glass border-0">
                    <CardHeader>
                      <CardTitle>竞赛详情</CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      <div>
                        <h4 className="font-semibold mb-2">竞赛描述</h4>
                        <p className="text-gray-300">{mockHackathon.description}</p>
                      </div>
                      <div>
                        <h4 className="font-semibold mb-2">规则说明</h4>
                        <p className="text-gray-300">{mockHackathon.rules}</p>
                      </div>
                      <div className="flex gap-2">
                        <Button className="gap-2">
                          <ExternalLink className="w-4 h-4" />
                          访问 Kaggle
                        </Button>
                        <Button variant="outline" className="gap-2 bg-transparent">
                          <Share2 className="w-4 h-4" />
                          分享
                        </Button>
                      </div>
                    </CardContent>
                  </Card>
                </TabsContent>

                <TabsContent value="prizes" className="mt-6">
                  <div className="space-y-4">
                    {mockHackathon.prizes.map((prize, index) => (
                      <Card key={index} className="glass border-0">
                        <CardContent className="p-4">
                          <div className="flex items-center justify-between">
                            <div>
                              <h4 className="font-semibold text-lg">{prize.rank}</h4>
                              <p className="text-gray-400">{prize.description}</p>
                            </div>
                            <div className="text-right">
                              <p className="text-2xl font-bold text-green-400">{prize.amount}</p>
                            </div>
                          </div>
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                </TabsContent>

                <TabsContent value="timeline" className="mt-6">
                  <Card className="glass border-0">
                    <CardContent className="p-6">
                      <div className="space-y-4">
                        {mockHackathon.timeline.map((item, index) => (
                          <div key={index} className="flex items-center gap-4">
                            <div
                              className={`w-3 h-3 rounded-full ${
                                item.status === "completed"
                                  ? "bg-green-400"
                                  : item.status === "current"
                                    ? "bg-blue-400"
                                    : "bg-gray-400"
                              }`}
                            />
                            <div className="flex-1">
                              <p className="font-medium">{item.event}</p>
                              <p className="text-sm text-gray-400">{item.date}</p>
                            </div>
                            <Badge
                              variant={
                                item.status === "completed"
                                  ? "default"
                                  : item.status === "current"
                                    ? "secondary"
                                    : "outline"
                              }
                            >
                              {item.status === "completed"
                                ? "已完成"
                                : item.status === "current"
                                  ? "进行中"
                                  : "即将开始"}
                            </Badge>
                          </div>
                        ))}
                      </div>
                    </CardContent>
                  </Card>
                </TabsContent>

                <TabsContent value="teammates" className="mt-6">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {mockHackathon.teammates.map((teammate) => (
                      <Card key={teammate.id} className="glass border-0">
                        <CardContent className="p-4">
                          <div className="flex items-center gap-3">
                            <Avatar>
                              <AvatarImage src={teammate.avatar || "/placeholder.svg"} />
                              <AvatarFallback>{teammate.name[0]}</AvatarFallback>
                            </Avatar>
                            <div className="flex-1">
                              <h4 className="font-medium">{teammate.name}</h4>
                              <p className="text-sm text-gray-400">{teammate.rank}</p>
                              <div className="flex gap-1 mt-1">
                                {teammate.skills.map((skill) => (
                                  <Badge key={skill} variant="outline" className="text-xs">
                                    {skill}
                                  </Badge>
                                ))}
                              </div>
                            </div>
                          </div>
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                </TabsContent>
              </Tabs>
            </motion.div>
          </div>

          {/* 侧边栏 */}
          <div className="lg:col-span-1">
            <motion.div
              initial={{ opacity: 0, x: 20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.6 }}
              className="sticky top-24"
            >
              <Card className="glass border-0">
                <CardHeader>
                  <CardTitle className="flex items-center justify-between">
                    快速操作
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={handleBookmark}
                      className={isBookmarked ? "text-yellow-400" : ""}
                    >
                      <Bookmark className={`w-4 h-4 ${isBookmarked ? "fill-current" : ""}`} />
                    </Button>
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <Button
                    className="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600"
                    onClick={handleJoinTeam}
                    disabled={isJoining}
                  >
                    {isJoining ? "匹配中..." : "一键开黑"}
                  </Button>

                  <Button variant="outline" className="w-full bg-transparent">
                    <ExternalLink className="w-4 h-4 mr-2" />
                    访问平台
                  </Button>

                  <div className="pt-4 border-t border-white/10">
                    <div className="space-y-3 text-sm">
                      <div className="flex justify-between">
                        <span className="text-gray-400">截止时间</span>
                        <span className="font-medium">{mockHackathon.deadline}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-gray-400">剩余时间</span>
                        <span className={`font-medium ${daysLeft <= 3 ? "text-red-400" : "text-green-400"}`}>
                          {daysLeft} 天
                        </span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-gray-400">参与人数</span>
                        <span className="font-medium">{mockHackathon.participants.toLocaleString()}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-gray-400">奖金池</span>
                        <span className="font-medium text-green-400">{mockHackathon.prize}</span>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          </div>
        </div>
      </div>
    </div>
  )
}
